<template>
  <view class="flex-1 flex flex-col justify-between">
    <view class="flex-[2] flex-col flex px-5">
      <view class="bg-white rounded-[20rpx] mt-[26rpx]">
        <view>
          <view class="flex justify-between items-center py-[30rpx] px-5 mt-1">
            <view class="text-base text-black">头像</view>
            <view class="text-[16px] flex items-center">
              <button
                open-type="chooseAvatar"
                @chooseavatar="onChooseavatar"
                class="bb w-[54rpx] h-[54rpx] rounded-full"
                hover-class="a"
              >
                <image
                  mode="aspectFill"
                  :src="form.avatar"
                  class="w-[54rpx] h-[54rpx] rounded-full"
                ></image>
              </button>
            </view>
          </view>
          <view class="flex justify-between items-center py-[30rpx] px-5">
            <view class="text-base text-black">昵称</view>
            <view class="text-[16px] flex items-center" @click="showName = true"
              ><text class="text-[#4C4C4C] text-base">{{ form.nickname }}</text>
              <up-icon
                class="pl-2"
                name="arrow-right"
                color="#7E838F"
                size="16"
              ></up-icon
            ></view>
          </view>
          <view class="flex justify-between items-center py-[30rpx] px-5">
            <view class="text-base text-black">性别</view>
            <view class="text-[16px] flex items-center" @click="showSet = true"
              ><text class="text-[#4C4C4C] text-base">{{
                setTitle || "请选择"
              }}</text>
              <up-icon
                class="pl-2"
                name="arrow-right"
                color="#7E838F"
                size="16"
              ></up-icon
            ></view>
          </view>
          <view class="flex justify-between items-center py-[30rpx] px-5">
            <view class="text-base text-black">生日</view>
            <view class="text-[16px] flex items-center" @click="showDate = true"
              ><text class="text-[#4C4C4C] text-base">{{
                form.birthday || "请选择"
              }}</text>
              <up-icon
                class="pl-2"
                name="arrow-right"
                color="#7E838F"
                size="16"
              ></up-icon
            ></view>
          </view>
          <view class="flex justify-between items-center py-[30rpx] px-5 mb-1">
            <view class="text-base text-black">绑定手机</view>
            <view class="text-[16px] flex items-center"
              ><text class="text-[#4C4C4C] text-base">{{ form.phone }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="px-5 mb-9">
      <view
        @click="submit"
        class="bg-theme h-[90rpx] leading-[90rpx] text-white text-center rounded-[8rpx]"
        >保存</view
      >
    </view>
    <up-action-sheet
      cancelText="取消"
      :actions="listSet"
      :show="showSet"
      @select="handleSet"
      @close="showSet = false"
    ></up-action-sheet>
    <u-datetime-picker
      ref="datetimePickerRef"
      :show="showDate"
      minDate="1900-01-01"
      v-model="date"
      mode="date"
      :formatter="formatter"
      @cancel="showDate = false"
      @confirm="handleDate"
    ></u-datetime-picker>
    <u-modal
      :show="showName"
      title="昵称"
      showCancelButton
      @cancel="showName = false"
      @confirm="hadleName"
    >
      <view class="px-3 w-full">
        <view class="w-full">
          <up-input
            type="nickname"
            @blur="bindblur"
            :customStyle="customStyle"
            placeholder="请输入你的昵称"
            border="surround"
            v-model="nickname"
          ></up-input>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { profile_api } from "@/api/user.js";
import { onReady, onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
import { upload_file_api } from "@/api/public.js";
import dayjs from "dayjs";
const userStore = useUserStore();
const userInfo = computed(() => {
  return userStore.userInfo;
});
const customStyle = computed(() => ({
  height: "84rpx",
}));
const datetimePickerRef = ref(null);
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
const nickname = ref("");
const date = ref(dayjs().format("YYYY-MM-DD"));
const showDate = ref(false);
const showSet = ref(false);
const showName = ref(false);
const listSet = ref([
  {
    name: "男",
    value: "1",
  },
  {
    name: "女",
    value: "2",
  },
]);

const setTitle = ref("");

const form = reactive({
  nickname: "", //昵称
  gender: "", //性别 1=男 2=女
  birthday: "", //出生日期
  avatar: "", //头像
  phone: "", //手机号
});

const handleSet = (e) => {
  setTitle.value = e.name;
  form.gender = e.value;
  showSet.value = false;
};

const handleDate = (e) => {
  console.log(e, dayjs(e.value).format("YYYY-MM-DD"));
  showDate.value = false;
  form.birthday = dayjs(e.value).format("YYYY-MM-DD");
};

const onChooseavatar = async (e) => {
  console.log(e);
  const result = await upload_file_api({
    filePath: e.detail.avatarUrl,
    name: "file",
  });
  if (result.code == 1) {
    form.avatar = result.data.fullurl;
  } else {
    uni.showToast({
      title: result.msg,
      icon: "none",
    });
  }
};

const hadleName = (e) => {
  form.nickname = nickname.value;
  showName.value = false;
};

const bindblur = (e) => {
  nickname.value = e;
};

const submit = () => {
  if (!form.avatar) return uni.showToast({ title: "请上传头像", icon: "none" });
  if (!form.nickname)
    return uni.showToast({ title: "请输入昵称", icon: "none" });
  if (!form.gender) return uni.showToast({ title: "请选择性别", icon: "none" });
  if (!form.birthday)
    return uni.showToast({ title: "请选择生日", icon: "none" });
  uni.showLoading();
  profile_api(form)
    .then(() => {
      userStore.getUser(
        Object.assign({}, userInfo.value, form, { mobile: form.phone })
      );
      uni.showModal({
        title: "温馨提示",
        content: "设置成功",
        showCancel: false,
        success: () => {
          uni.navigateBack();
        },
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};

onLoad(() => {
  form.avatar = userInfo.value.avatar;
  nickname.value = form.nickname = userInfo.value.nickname;
  form.birthday = userInfo.value.birthday;
  form.gender = userInfo.value.gender;
  setTitle.value = form.gender == 1 ? "男" : form.gender == 2 ? "女" : "";
  date.value = form.birthday || dayjs().format("YYYY-MM-DD");
  form.phone = userInfo.value.mobile;
});
</script>

<style lang="scss" scoped>
.bb {
  background: transparent;
  border-width: 0 !important;
  padding: 0;
  &::after {
    border-width: 0 !important;
    outline: initial !important;
  }
}
:deep(.u-border) {
  border-color: #eceff4 !important;
}
</style>
